<template>
  <div class="loginForm">
    <!-- :model:当前表单所绑定的数据，只有绑定了model,才能让表单元素进行具体的属性绑定 -->
    <!-- :rules:表单元素的用户输入的验证规则 ,rules的定义必须参照文档-->
    <el-form :model="form" :rules="rules" ref="loginForm" class="demo-ruleForm">
      <!-- 如果想让某个表单元素使用指定的校验规则，则需要在el-form-item中通过prop定义 -->
      <el-form-item prop="username">
        <!-- v-model:设置当前文本框和数据的绑定 -->
        <el-input type="text" clearable v-model="form.username" @focus="cleanValid('username')"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <!-- v-model:设置当前文本框和数据的绑定 -->
        <el-input type="password" clearable v-model="form.password" @focus="cleanValid('password')"></el-input>
      </el-form-item>
      <el-button type="text" style="float:right">忘记密码</el-button>
      <el-button type="primary" style="width:100%" @click="login">登陆</el-button>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: "admin",
        password: "admin",
      },
      // rules定义在data中，它是一个对象
      rules: {
        // 定义校验规则
        username: [
          // required:必填 message：如果不满足规则时的提示信息  trigger:触发校验的时机
          { required: true, message: "请输入合法的用户名", trigger: "blur" },
          // 补充：添加用户输入内容的验证，添加正则表达式
          {
            pattern: /^1\d{10}$|^\w{3,}$/,
            message: "请输入正则格式的用户名或者11位数字的手机号",
            trigger: "blur",
          },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  methods: {
    login() {
      // 对用户输入进行二次验证，如果通过则可以发起登陆请示，如果不通过则不能发起登陆请示
      // validate方法可以对表单元素的数据根据rules规则进行校验，同时会将校验结果返回到回调函数中，它是表单的方法
      this.$refs.loginForm.validate(async (valid) => {
        if (valid) {
          try {
            // 试图执行一个操作，我也不知道是否会出错
            let res = await this.$axios({
              method: "post",
              url: "/accounts/login",
              data: this.form,
            });
            console.log(res);
            if (res.data.token) {
              this.$message.success("登陆成功");
              // 将当前的用户信息存储到store
              // 赋值的写法：this.$store.commit('仓库名称/mutations中的方法名称'，你想传递的数据)
              // this.$store.commit('user/setUserInfo',res.data)
              // 通过dispatch调用Actions中的成员
              this.$store.dispatch('user/setUserInfoAction',res.data)
              // 不要直接为state中的成员赋值，一定要经过mutations(do not mutate vuex store state outside mutation handlers)
              // this.$store.state.user.userinfo = res.data
              // 将当前用户信息存储到本地存储
              // localStorage.setItem('xyly_52',JSON.stringify(res.data))
              this.$router.push("/");
            }
          } catch (e) {
            // 如果出错，会由catch进行捕获，你可以在这个结构中进行处理
            this.$message.warning("登陆失败，请重新输入");
          } finally {
            // 无论如何都会执行的代码块
          }
          // 发起登陆请示

          //   .then(res =>{
          //       console.log(res)
          //   this.$message.success("登陆成功");
          //   this.$router.push('/')
          //   })
          //   .catch(err => {
          //       console.log(err)
          //       this.$message.warning("登陆失败，请重新输入");
          //   })
        } else {
          this.$message.warning("用户输入不合法");
        }
      });
    },
    //   清除当前的验证
    cleanValid(propname) {
      // 清除指定的验证信息
      this.$refs.loginForm.clearValidate(propname);
    },
  },
};
</script>

<style lang="less" scoped>
.loginForm {
  padding: 30px;
}
.el-button + .el-button {
  margin-left: 0;
}
</style>